<template>
    <el-container>
      <el-header>作品管理</el-header>
      <el-main>
        <el-table :data="books" @row-click="viewBook">
          <el-table-column prop="idbook" label="ID"></el-table-column>
          <el-table-column prop="bookName" label="书名"></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        books: []
      };
    },
    created() {
      this.fetchBooks();
    },
    methods: {
      fetchBooks() {
        axios.get('/api/books')
          .then(response => {
            this.books = response.data;
          })
          .catch(error => {
            console.error('获取书籍失败:', error);
          });
      },
      viewBook(book) {
        this.$router.push({ path: `/book/${book.idbook}` });
      }
    }
  }
  </script>
  